<template> 
 <!-- <span style="color: #33cc99;background: #33cc99;">222</span>
 <span style="color: #cc9933;background: #cc9933;">222</span>
 <span style="color: #993333;background: #f56c6c;">222</span>
 <span style="color: #ff9933;background: #ff9933;">222</span> -->

<!-- 弹出框 -->
<vol-box :lazy="true" v-model="model1" title="显示预警" :width="950" :padding="5" :onModelClose="onModelClose1">
      <div style="height:400px;">
        <vol-table
            ref="table"
             :ck  = "false"
            :columnIndex = "false"
            :linkView="_linkView"
            :columns="columns"
            :height="350"
            :index="true"
            url="/api/EQU_TOOL/getPageData"
            @loadBefore="loadBefore"
            @onInit="onInit"
            :defaultLoadPage="false"
            :pagination-hide="false"
            :pagination="pagination"
          ></vol-table>   
   
      </div>
      <div>
    <!-- <button @click="showTable = true">打开表格窗口</button> -->

   
    <div v-if="showTable" class="modal">
      <div class="modal-content">
  
        <!-- <button @click="showTable = false">关闭</button> -->
        <table>
          <thead>
            <tr>
              
              <th  style="width: 23%;">工单</th>
              <th style="width: 10%;">设备</th>
              <th style="width: 10%;">精度</th>
              <th  style="width: 5%;">当前程序</th>
              <th  style="width: 5%;">刀Total</th>
              <th style="width: 10%;">进度</th>
              <th style="width: 10%;">加工时间</th>
              <th style="width: 15%;">是否在线</th>
              
              <th style="width: 15%;">使能</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              
              <td  style="width: 23%;text-align: center;">{{ item.orderCode }}</td>
              <td style="width: 10%;text-align: center;">{{ item.processing_machines }}</td>
              <td  style="width: 10%;text-align: center;">{{ item.accuracy==0?"-":item.accuracy }}</td>
              <td  style="width: 8%;text-align: center;">{{ item.processingNumber==0?"-":item.processingNumber }}</td>
              <td  style="width: 7%;text-align: center;">{{ item.usedToolTotal==0?"-":item.usedToolTotal }}</td>
              
              <td  style="width: 10%;text-align: center;">
                <template v-if="item.executeOrderTime > 0">
    <el-progress
      :stroke-width="4"
       :color="item.executeOrderTime < 50 ? '#f56c6c' : '#67c23a'"
      :show-text="true"
      :percentage="Number(item.executeOrderTime)"
    />
  </template>
  <span v-else>-</span>
               
                </td>
              <td  style="width: 10%;text-align: center;"><span style="color: #409EFF;">{{item.processingTime==0?"-":this.secondsToTime(item.processingTime)}}</span></td>
              <td style="width: 15%;text-align: center;" v-html="item.isOnlineStr"></td>
              <td style="width: 15%;text-align: center;" v-html="item.isEnableStr"></td>
              <td><img style="width: 40px;height: 40px;" :src="item.img"/></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
      <template #footer>
          <div>
              <!-- <el-button type="primary" plain size="small" @click="callParent">调用生成(父)页面对象</el-button>
              <el-button type="primary" size="small" @click="closeModel2">确认</el-button> -->
              <el-button type="default" size="small" @click="model1 = false">关闭</el-button>
          </div>
      </template>
  </vol-box>


  <!-- 弹出框二 -->
  <vol-box :lazy="true" v-model="model2" title="日志" :width="750" :padding="5" :onModelClose="onModelClose">
      <div style="height:400px;">
        <p v-html="model2Row"></p>
          <!-- <p  v-html="formattedText">
             {{ model2RowFalut }}
              {{ JSON.stringify(model2RowFalut) }}
              <p v-html="formattedText"></p>
          </p> -->
      </div>
      <template #footer>
          <div>
              <!-- <el-button type="primary" plain size="small" @click="callParent">调用生成(父)页面对象</el-button>
              <el-button type="primary" size="small" @click="closeModel2">确认</el-button> -->
              <el-button type="default" size="small" @click="model2 = false">关闭</el-button>
          </div>
      </template>
  </vol-box>
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from '@/components/basic/VolBox.vue';
import { fa } from "element-plus/es/locales.mjs";

//这里使用的vue2语法，也可以写成vue3语法
export default {
  components: { VolTable, 'vol-box': VolBox },
  data() {
      return {
        row: {},
        showTable: true,
        dialogVisible: true, // 控制弹窗显示
      tableData: [

      ],
          model1: true,
          model1Rows: [], //弹出框1传入的选中行
          model2: false,
          model2Row: {},//弹出框2点击的当前行数据
          url: 'api/EQU_COM_DEFINITION_TASK/getPageData',//指定从某个接口获取table数据
          pagination:{size: 200,sizes:[30,60,100,120,200]},
            //更多table配置见文档：http://v3.volcore.xyz/table
            //明细表格配置，从生成的vue文件中可以复制过来
            columns: [
            
            { field: 'program_seq', title: '程序序号', type: 'string', width: 95, sort:true, align: 'center' },
            { field: 'location', align:'center',title: '位置', type: 'string', width: 80, formatter: (row, column, cellValue, index) => {
                if(row.IsUse=='3')
                {
                 
                  return `<span style="color: #ffff;background: #3399ff;">【${row.location}】</span>`;
                  // return { background: "#3399ff", color: "#ffff" }}
                //return `<span style="color: #33cc99;background: #33cc99;">1111</span>${row.location}`;
                }else   if(row.IsChange=='3')
                {
                  return `<div style="color:green;font-weight: bold" class="input-icon el-icon-location"></div><span style="color: #ffff;background: #cc9933;">【${row.location}】</span>`;
                }
                //else{
                //    // return `<span style="color: #cc9933;background: #cc9933;">${cellValue}</span>`;
                //    return `<span style="color: #cc9933;background: #cc9933;">${cellValue}</span>${row.location}`;
                // }
               // return `<a href="javascript:void(0);" onclick="this._linkView(${JSON.stringify(row)},${JSON.stringify(column)})">${cellValue}</a>`;
               return `${row.location}`;
            } },

            { field: 'reality_R', align:'center',title: 'R', type: 'string', width: 50, },
            { field: 'accuracy', align:'center',title: '精度', type: 'string', width: 60, },
            {field:'reality_knife_width',align:'center',title:'实际刀径', type: 'string', width: 70 },
            { field: 'reality_pairing_length', align:'center', title: '实际对刀长度', type: 'string', width: 95,formatter: (row, column, cellValue, index) => {
                if(row.IsUse=='3')
                {
                 
                  return `${row.program_seq}【<span style="color: blue">${row.reality_pairing_length}</span>】`;
                
                }else   if(row.IsChange=='3')
                {
                  return `${row.program_seq}【<span style="color: blue">${row.reality_pairing_length}</span>】`;
                }
                
               return `${row.program_seq}【<span style="color: blue">${row.reality_pairing_length}</span>】`;
            }},
            { field: 'ExecuteTaskDiffTime',align:'center', title: '加工时间', type: 'string', width: 100,formatter: (row, column, cellValue, index) => {
                if(row.ExecuteTaskDiffTime>0)
                {
                 
                  return `<div style="color:green;font-weight: bold" class="input-icon el-icon-watch"></div>${this.secondsToTime(row.ExecuteTaskDiffTime)}`;
                
                }else   
                {
                  return `-`;
                }
                
               
            }},
            { field: 'time',align:'center', title: '理论时间&文件大小&行', type: 'string', width: 335,formatter: (row, column, cellValue, index) => {
                if(row.time!=null)
                {

                  return `${row.time}【文件:${row.FileSize}】`;
                
                }else   
                {
                  return `-`;
                }
                
               
            }}
          ],
      };
  },

  methods: {
    onInit() {  //框架初始化配置前，
      
      this.columns.forEach(x => {
      debugger;
        x.hidden = false;
        x.cellStyle = (row, rowIndex, columnIndex) => {        
          return { background: "#33cc99", color: "red" }
        };
      });
    },
    calculatePercentage(numerator, denominator) {
  if (denominator === 0 || isNaN(numerator) || isNaN(denominator)) {
    return 0;
  }
  return (numerator / denominator * 100).toFixed(2);
},
     //秒转换为时分秒
 secondsToTime(seconds) {
  const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
  const remainingSeconds = (seconds % 60).toString().padStart(2, '0');
  
  return hours + ":" + minutes + ":" + remainingSeconds;
},
    openDialog() {
        debugger;
        console.log(this.dialogVisible);
      this.dialogVisible = true; // 打开弹窗
    },
    _linkView(row, column) {
      debugger;
      this.text =
        "点击单元格的弹出框，当前点击的行数据：" + JSON.stringify(row);

      this.model1 = true;
      //  this.$message.error(JSON.stringify(row));
    },

    loadBefore(params, callback) {//表格数据加载时触发


            //更多table配置见文档：http://v3.volcore.xyz/table
            //   这里也可以设置一些查询条件
            params.wheres = [{ name: "Identifier", value:this.row.OrderCode }];
            return callback(true);
        },
   

      openModel1(rows) { //弹出框1
   
        this.dialogVisible=true;
        this.model1Rows = rows;
       
       
         this.showTable = true;
        this.request2('EarlyWarning', rows);
  
         
      },
      openModel2(row, column, index) {//弹出框2
          this.request1('sendlog', row);
       
      },
      openModel3(row, column, index) {//弹出框3 显示异常
          this.request1('Faultlog', row);
       
      },
      closeModel1() {
          this.model1 = false;
      },
      closeModel2() {
          this.model2 = false;
      },
      callParent() {
          this.$emit('parentCall', $parent => {
              //$parent就是生成页面的对象，比如可以调用页面刷新，可获取的属性与方法见【生成页面文档】,$parent.xxx直接调用
              //调用刷新
              $parent.search();
              //获取所有选中的行数据
              // $parent.getSelectRows();
              this.$message.success('调用了刷新')
          })
      },
      onModelClose() {
         // this.$message.success('弹出框右上角点击x关闭事件')
      },
      request1(action, row) {
   //   let url = `api/V_PLAN_WORK_ORDER/${action}`;
   let url = `A_UpperComputer/${action}`;
      this.http.post(url, row, true).then((result) => {
    if(action=='Faultlog'){
        this.model2Row= "";
    for (let [key, value] of Object.entries(result.data)) {

            this.model2Row+=value.createOn+" "+value.content+"<br>";
  // 执行循环体代码
}
    }
   

if(action=='sendlog'){
    this.model2Row = result.data;
}
  
        this.model2 = true;
     //   this.$message.success('执行成功');
       // this.search();
      });
    },
    request2(action, row) {
    if (this.$refs.table) {
        this.row = row; //保存当前触发的行数据，下面查询时用
              this.$refs.table.load(null, true);
              this.model1 = true;
             console.log(JSON.stringify(row))
              let url = `A_UpperComputer/${action}`;
              this.tableData=[];
      this.http.post(url, row, true).then((result) => {
        for (let [key, value] of Object.entries(result.data)) {

        
      this.tableData.push(value);
           // this.tableData.push({ date: '2023-10-01', name: value.orderCode, processing_machines: '北京市朝阳区' });
            // 执行循环体代码
            }
            console.log(this.tableData);
    //     this.tableData=[
    //     { date: '2023-10-01', name: '张三', address: '北京市朝阳区' },
    //     { date: '2023-10-02', name: '李四', address: '上海市浦东新区' },
    //     { date: '2023-10-03', name: '王五', address: '广州市天河区' },
    //   ]
      });
           

          }
    },
  }
};
</script>
<style >
.icon-with-number {
  display: inline-flex;
  align-items: center;
}
.number {
  margin-left: 5px; /* 根据需要调整间距 */
}
</style>